<template>
  <div v-loading="listLoading">
    <div v-show="!isEdit" class="edit-ct" @click="handleSetEditVal(scope.$index, scope.row)">
      <i class="el-icon-edit" />
      <span v-if="verifyType == 'numTwo'">￥{{ scope.row[valName] | toFixed }}</span>
      <span v-if="verifyType !== 'numTwo'">{{ scope.row[valName] }}</span>  <span v-if="valName == 'praise' && scope.row[valName]">星</span>
    </div>
    <div v-show="isEdit">
      <el-input
        v-model="editVal"
        size="small"
        class="input-width"
        style="margin-bottom: 5px;"
        @input="$forceUpdate()"
        @keyup.native="editVal = verifyVal(verifyType, editVal)"
        :maxlength="maxlength"
      />
      <el-button size="mini" type="primary" @click="handleSaveEditVal(scope.$index, scope.row)">保存</el-button>
      <el-button size="mini" @click="handleCancelSetEditVal(scope.$index, scope.row)">取消</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TableEditInput',
  props: {
    scope: {
      type: Object,
      default: function () {
        return {}
      },
    },
    valName: {
      type: String,
      default: '',
    },
    reqFuc: {
      type: Function,
      default: function () {
        return function () {}
      },
    },
    verifyType: {
      type: String,
      default: 'num',
    },
    maxlength: {
      type: Number,
      default: 999,
    },
  },
  data() {
    return {
      listLoading: false,
      editVal: '',
      isEdit: false,
    }
  },
  methods: {
    /* 单独设置值 */
    handleSetEditVal(index, row) {
      this.editVal = this.scope.row[this.valName]
      this.isEdit = true
    },
    /* 保存设置值 */
    handleSaveEditVal(index, row) {
      this.listLoading = true
      const data = {
        id: row.id,
      }
      data[this.valName] = this.editVal
      this.reqFuc(data)
        .then((response) => {
          this.listLoading = false
          row[this.valName] = this.editVal
          this.isEdit = false
          this.$emit('getList')
        })
        .catch((error) => {
          this.listLoading = false
        })
    },
    /* 取消设置值 */
    handleCancelSetEditVal(index, row) {
      this.isEdit = false
    },
  },
}
</script>
